import React, { useState, useRef } from 'react'
import {
  Input,
  Button,
  Space,
  Row,
  Col,
  Modal,
  message
} from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import myAxios from '../../../../utils/myAxios';
import store from '../../../../redux/store';
import { AsyncAddOptionAction, AsyncModifyOptionAction, AsyncDeleteOptionAction } from '../../../../redux/action/customerAction/option';
export default function AddOption(props) {
  const myRef = useRef()
  const newTitle = useRef()

  const { toAddOptionType, toAddOptionData, setisModalAdd,setisShowModify,setisModalDetail } = props
  console.log(toAddOptionData);
  console.log(toAddOptionType);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editInfo, seteditInfo] = useState({});
  // const [myparam, setmyparam] = useState({ title: '' });

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // Modal 完全关闭后的回调 ,将输入框 默认值设置为空
  const afterClose = () => {
    seteditInfo({});
  };
  //编辑某个选项值
  const editOption = (item) => {
    // console.log(item);
    seteditInfo(item)
  }
  //删除某个选项值
  const deleteOption = (id) => {
    console.log(id);
    store.dispatch(AsyncDeleteOptionAction(toAddOptionType, id))
    // 关闭模态框
    setisModalAdd(false)
    setIsModalVisible(false)
  }
  //新增请求
  function addRequest(type, value) {
    store.dispatch(AsyncAddOptionAction(type, value))
    myRef.current.input.value = ''
    setisModalAdd(false)
  }
  //修改某个选项,点击保存
  const saveEdit = () => {
    store.dispatch(AsyncModifyOptionAction(toAddOptionType, editInfo.id, editInfo.title))
    // 关闭模态框
    setisModalAdd(false)
    setIsModalVisible(false)

  }
  //输入框内容变化时的回调
  const inputchange = (e) => {
    seteditInfo({ ...editInfo, title: e.target.value })
  }
  return (
    <div>

      <Row>
        <Col span={4} offset={2}>
          <Space direction={'vertical'} size='large'>
            <div>新增选项值</div>
            <div>已有选项值</div>
          </Space>
        </Col>
        <Col span={8}>
          <Input ref={myRef} style={{ marginLeft: 10, width: 200 }} />
          <div style={{ border: '1px solid gray', width: 300, margin: 10 }}>
            {
              toAddOptionData.map((item) => {
                return (
                  <div key={item.id} style={{ width: '300px' }}>
                    <div style={{ padding: 10 }} >{item.title}</div>
                    <div style={{ borderBottom: '1px dashed gray', width: '280px', margin: '0 auto' }}></div>
                  </div>
                )
              })
            }
            <div style={{ padding: 10 }}>
              <Button type='primary' danger
                onClick={() => setIsModalVisible(true)}
              >删除自定义选项值</Button>
            </div>
          </div>


        </Col>
      </Row>
      <div style={{ width: '33%', textAlign: 'center' }}>
        <Space align='center'>
          <Button
            onClick={() => {
              addRequest(toAddOptionType, myRef.current.input.value)

            }}
            style={{ width: 100 }} size='midle' type="primary" htmlType="submit">
            保存
          </Button>
          <Button onClick={() => { }} style={{ width: 100 }} size='midle' danger type="primary" >
            取消
          </Button>
        </Space>
      </div>
      <Modal
        bodyStyle={{ height: 500, overflowY: 'scroll' }}
        footer={[]}
        title="删除自定义选项值" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} afterClose={afterClose}>
        <Row>
          <Col span={16} offset={2}>
            <Space>
              <span>参数：</span>
              <Input
                value={editInfo.title}
                onChange={inputchange}
              />
              <Button
                onClick={saveEdit}
              >保存</Button>
            </Space>
          </Col>
        </Row>
        {
          toAddOptionData.map((item) => {
            return (
              <div key={item.id} style={{ width: '300px' }}>
                <div style={{ padding: 10, position: 'relative' }} >
                  <div style={{ display: 'inline-block' }}>
                    {item.title}
                  </div>
                  <div style={{ textAlign: 'right', display: 'inline-block', position: 'absolute', right: 20 }}>
                    <Space>
                      {/* 编辑 */}
                      <span><EditOutlined onClick={() => {
                        editOption(item)
                      }} /></span>
                      {/* 删除 */}
                      <span><DeleteOutlined onClick={() => {

                        deleteOption(item.id)


                      }} /></span>
                    </Space>
                  </div>
                </div>
                <div style={{ borderBottom: '1px dashed gray', width: '280px', margin: '0 auto' }}></div>
              </div>
            )
          })
        }
      </Modal>
    </div>
  )
}
